<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="main">
    <nav class="navbar navbar-expand-md bg-dark navbar-dark"><!-- fixed-top固定在最上方-->
        <div class="container">
            <!-- Brand -->
            <a class="navbar-brand" th:href="@{/}">首页</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">商品管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">员工管理</a>
                    </li>
                </ul>

                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link">你好，</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/login/logout}">[注销]</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>


<div th:fragment="footer">
    <div class="container" style="border-top: yellowgreen 2px; margin-top: 100px;">
        <hr>
        copy-right: 2021 &nbsp;&nbsp; 备案号:10000000
    </div>
</div>

<!--模态框的录入-->
<button class="btn tn-primary btn-sm" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">押金</h4>
            </div>
            <div class="modal-body">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link">你好，本次所需押金</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" style="color :red; font-size:40px; margin:10px auto;"
                           align="center" th:text="#{}"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">请确认</a>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" th:onclick="alterHouse()">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    function alterHouse() {
        location.href = "house/alterHouse"
    }
</script>

</body>
</html>